<template>
    <n-card title="属性值与收益率对比图" class="h-full">
        <v-chart autoresize :option="options" class="h-chart-height w-full"></v-chart>
    </n-card>
</template>

<script setup>
import * as echarts from 'echarts';
import VChart from 'vue-echarts';
import {onMounted,ref} from 'vue';
const props = defineProps(["data",'date_list']);
const date_list = props.date_list;
const data = props.data;
const date_string_list = [];
date_list.forEach(function (secondsTimestamp) {
    var millisecondsTimestamp = secondsTimestamp * 1000; //将秒级时间戳转换为毫秒级时间戳
    var date = new Date(millisecondsTimestamp); //创建日期
    var isoDate = date.toISOString().slice(0, 10); //获取ISO日期格式，只保留日期部分
    date_string_list.push(isoDate); //将ISO格式日期添加到数组中
})
const options = ref({
    legend: {
        data: []
    },
    xAxis: {
        type: 'category',
        data: date_string_list
    },
    yAxis: {
        type: 'value'
    },
    tooltip: {
        trigger: 'axis', // 触发类型，这里是鼠标悬停在数据项上时触发
        axisPointer: { // 坐标轴指示器配置项
            type: 'shadow' // 坐标轴指示器类型，这里配置为阴影指示器
        }
    },
    series: [
     
    ]
})
onMounted(()=>{
    options.value.series.splice(0, options.value.series.length);
    options.value.legend.data.splice(0, options.value.legend.data.length); 
    for(let i of data){
        options.value.legend.data.push(i.label)
         options.value.series.push({
            name:i.label,
            data:i.data_list,
            type: 'line',
            smooth: true,
    })
    }
   
})
</script>